<template>
    <div class="boxContentCss">
        <el-form ref="formRef" :model="form"  label-position="left" label-width="100px">
            <EdCreateCard title="编辑活动">
                <template #back>
                    <div class="createBack" @click="$utilsSet.goBack($router)" >
                        <svg-icon icon-class="back" /> 返回
                    </div>
                </template>
                <div class="zh_black">
                    <el-form-item label="活动主题" class="width-50 inline-block" prop="title" :rules="$validate.validates({required:true,msg:'活动主题不能为空'})">
                        <el-input v-model="form.title" placeholder="输入活动主题" maxlength="20"></el-input>
                    </el-form-item>
                    <el-form-item label="活动时间" prop="time" :rules="$validate.validates({required:true,msg:'活动时间不能为空'})">
                        <el-date-picker
                                v-model="form.time"
                                type="datetimerange"
                                format="yyyy-MM-dd HH:mm"
                                value-format="yyyy-MM-dd HH:mm"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="活动内容" prop="detail" :rules="$validate.validates({required:true,msg:'活动内容不能为空'})">
                        <TinymceEditor
                                ref="tinymce"
                                :value="form.detail"
                                @input="newContent"
                        />
                    </el-form-item>
                    <el-form-item label="活动图片：" prop="pics" :rules="$validate.validates({required:true,msg:'活动图片不能为空'})">
                        <ed-upload ref="edUploadRef" :edUploadForm="edUploadForm" @fileList="fileList"></ed-upload>
                        <div class="color045 fontSize14 lengManx">*最多上传5张图片</div>
                    </el-form-item>
                    <el-form-item label="积分规则" prop="pointRuleStr" :rules="$validate.validates({required:true,msg:'积分规则不能为空'})">
                        <el-select v-model="form.pointRuleStr" style="width: calc(100% - 80px);max-width: 600px" @change="changePointRule" placeholder="请选择积分规则">
                            <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                        <!--                        <router-link to="/integral/rule-create?type=1">-->
                        <!--                            <el-link type="primary" :underline="false" style="margin-left: 20px">新建规则</el-link>-->
                        <!--                        </router-link>-->
                        <div class="ruleDetailsList" v-if="pointRuleObj.opposite">
                            <div>① {{pointRuleObj.opposite}}</div>
                            <div v-if="pointRuleObj.isPointRule1">② 有效期至：{{pointRuleObj.effective}} </div>
                            <div v-if="pointRuleObj.isPointRule2">③ 单用户日最大限领：{{pointRuleObj.maxPointDay}}</div>
                        </div>
                    </el-form-item>
                    <el-form-item label="活动地点" prop="address" :rules="$validate.validates({required:true,msg:'活动地点不能为空'})">
                        <el-input v-model="form.address" placeholder="输入活动地点" maxlength="100"></el-input>
                    </el-form-item>
                    <el-form-item label="活动负责人" prop="director" style="display: inline-block" :rules="$validate.validates({required:true,msg:'活动负责人不能为空'})">
                        <el-input style="width: 200px" v-model="form.director" placeholder="输入活动负责人" maxlength="100"></el-input>
                    </el-form-item>
                    <el-form-item label="" prop="directorMobile" style="display: inline-block;margin-left: -90px" :rules="$validate.validates({required:true,msg:'活动负责人手机号不能为空',type:'mobile'})">
                        <el-input style="width: 200px" v-model="form.directorMobile" placeholder="输入活动负责人手机号" maxlength="11"></el-input>
                    </el-form-item>
                    <el-form-item class="paddingBottom145 marginTop10">
                        <el-button type="primary"  @click="onSubmit('formRef')" :loading="disabled">保存</el-button>
                        <el-button class="Class1MarginLeft8" @click="reset">重置</el-button>
                    </el-form-item>
                </div>
            </EdCreateCard>
        </el-form>
    </div>
</template>

<script>
    import EdCreateCard from 'src/components/EdCreateCard.vue'
    import TinymceEditor from "src/components/EdTinymce.vue"
    import {uploadFile ,detailActivity ,modifyActivity ,queryList} from "src/api/activity"
    import EdUpload from "src/components/EdUpload.vue"
    export default {
        name: "ActivityUpdate",
        components:{
            TinymceEditor,
            EdUpload,
            EdCreateCard
        },
        data(){
            return{
                form:{
                    title:"",
                    time:"",
                    begin:"",
                    end:"",
                    detail:"",
                    pics:[],
                    pointRule:{},
                    pointRuleStr:"",
                    address:"",
                    director:"",
                    directorMobile:""
                },
                disabled:false,
                dialogImageUrl: '',
                dialogVisible: false,
                upFile:new FormData(),
                options: [],
                pointRuleObj:{
                    isPointRule1:false,
                    isPointRule2:false,
                },
                fileListNew:[],
                fileListLeg:0,
                edUploadForm:{
                    list:[]
                },
            }
        },
        mounted(){
            detailActivity({id:this.$route.query.id}).then(response => {
                if(response.code == 20000) {
                    this.form = {
                        title:response.data.title,
                        time:[response.data.begin,response.data.end],
                        begin:response.data.begin,
                        end:response.data.end,
                        detail:response.data.detail,
                        pics:response.data.pics,
                        pointRuleStr:response.data.pointRule ? String(response.data.pointRule.id) : "",
                        pointRule:{},
                        director:response.data.director,
                        directorMobile:response.data.directorMobile,
                        address:response.data.address
                    };
                    this.edUploadForm.list = [];
                    for (let i=0;i<response.data.pics.length;i++){
                        this.edUploadForm.list.push({
                            url:response.data.pics[i]
                        })
                    }
                }
            });

            queryList({
                page: 1,
                pageSize: 10000
            }).then(response => {
                if(response.code == 20000 && response.data.records) {
                    this.options = [];
                    for (let i=0;i<response.data.records.length;i++){
                        this.options.push({
                            value:response.data.records[i].id,
                            label:response.data.records[i].ruleName,
                            opposite:response.data.records[i].opposite,
                            effective:response.data.records[i].effective,
                            maxPointDay:response.data.records[i].maxPointDay,
                        })
                    }
                }
            })
        },
        deactivated(){
            this.init()
        },
        methods:{
            //选择规则
            changePointRule(val){
                for (let i=0;i<this.options.length;i++){
                    if(val == this.options[i].value){
                        this.pointRuleObj.opposite = this.options[i].opposite ? this.options[i].opposite : "";
                        this.pointRuleObj.effective = this.options[i].effective ? this.options[i].effective : "";
                        this.pointRuleObj.maxPointDay = this.options[i].maxPointDay ? this.options[i].maxPointDay : "";
                        this.pointRuleObj.isPointRule1 = !!this.options[i].effective;
                        this.pointRuleObj.isPointRule2 = !!this.options[i].maxPointDay;
                    }
                }
            },
            fileList(data){
                this.form.pics = [];
                for (let i=0;i<data.length;i++){
                    this.form.pics.push(data[i].response ? data[i].response.data : data[i].url)
                }
            },
            onSubmit(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.disabled = true;
                        if(this.contentTxtLength > 5000){
                            this.$message.info({
                                message:"活动内容不能超过5000字",
                                duration: 2000,
                                center:true
                            });
                            this.disabled = false;
                            return
                        }
                        this.form.begin = this.form.time[0];
                        this.form.end = this.form.time[1];
                        this.form.pointRule.id = parseInt(this.form.pointRuleStr);
                        // 不修改图片直接保存 不走上传功能
                        this.addActivity()
                    }
                })

            },
            newContent(val,length){
                if(val !== undefined){
                    this.$set(this.form,"detail",val);
                }
                this.contentTxtLength = length
            },
            addActivity(){
                let query = this.form.copy();
                delete query.time;
                delete query.pointRuleStr;
                query.id = this.$route.query.id;
                modifyActivity(query).then(response => {
                    if(response.code == 20000) {
                        this.$message.success({
                            message: '已成功修改积分活动 即将返回积分活动列表',
                            duration: 2000,
                            center:true
                        });
                        window.setTimeout(() => {
                            this.$utilsSet.goBack(this.$router);
                        }, 600)
                    }else {
                        this.form.pics = [];
                    }
                    this.disabled = false
                }).catch(()=>{
                    this.disabled = false;
                    this.form.pics = [];
                    this.upFile = new FormData();
                    this.$refs.upload.clearFiles()
                })
            },
            init(){
                this.form = {
                    title:"",
                    time:"",
                    begin:"",
                    end:"",
                    detail:"",
                    pics:[],
                    pointRule:{},
                    pointRuleStr:"",
                    address:"",
                    director:"",
                    directorMobile:""
                };
                this.pointRuleObj = {
                    isPointRule1:false,
                    isPointRule2:false,
                };
                this.$refs.formRef.resetFields();
                this.edUploadForm.list = [];
            },
            reset(){
                this.init();
                this.$refs.formRef.resetFields()
            }
        }
    }
</script>

<style lang="scss">

</style>

<style scoped lang="scss">
    .ruleDetailsList{
        margin-top: 9px;
        background: #E6F7FF;
        opacity: 1;
        border-radius: 2px;
        padding: 12px;
        width: calc(100% - 80px);
        max-width: 600px;
        div {
            font-size: 14px;
            font-weight: 400;
            line-height: 22px;
            color: rgba(0, 0, 0, 0.85);
        }
    }
</style>